import React, {FC, useCallback, useEffect, useMemo, useState} from "react";
import {Avatar, Card, Select} from "antd";
import "../css/RightMenu.less";
import {useTranslation} from "react-i18next";
import GlobalIcon from "../../global/GlobalIcon.tsx";
import {changeLanguage, getI18n} from "../../../i18n/i18n.tsx";
import {getUserInfo, logout} from "../../services/SecurityService.tsx";
import {coreDispatch} from "../../utils/StoreUtil.tsx";
import ChangePasswordModal from "../../component/modal/user/ChangePasswordModal.tsx";

interface RightMenuProps {
}

const RightMenu: FC<RightMenuProps> = (props) => {

    const {t} = useTranslation();

    const [userInfo, setUserInfo] = useState<any>(),
        [defaultLanguage, setDefaultLanguage] = useState<string>("");


    useEffect(() => {
        const userInfo: any = getUserInfo();
        setUserInfo(userInfo);
        setDefaultLanguage(getI18n());
    }, []);

    const onLogout: Function = useCallback(() => {
        logout()
    }, []);

    const handleChangePassword: Function = useCallback(() => {
        coreDispatch("modalReducer/createModal", {
            key: "ChangePasswordModal",
            modalProps: {
                title: t("changePassword"),
                destroyOnClose: "true"
            },
            component: ChangePasswordModal,
            comProps: {
                view: "form_user_center_change_password",
                url: "/sf-drs/platform/user/center/change_password",
                method: "PUT"
            }
        });
    }, []);

    const handleChangeLanguage: Function = useCallback((value: string) => {
        setDefaultLanguage(value);
        changeLanguage(value);
        window.location.reload();
    }, []);


    const renderRightMenu = useMemo(() => {
        if (!userInfo) {
            return null;
        }
        return (
            <div className="sf_core_right_menu">
                <div className="sf_core_right_menu_header">
                    <div className={"sf_core_right_menu_header_img"}>
                    </div>
                    <div className={"sf_core_right_menu_header_info"}>
                        <div className={"sf_core_right_menu_header_info_logo"}>
                            <Avatar
                                icon={<span>{userInfo.username.slice(0, 1)}</span>}
                            />
                        </div>
                        <div className="sf_core_right_menu_header_info_user">
                            <p>{userInfo.username}</p>
                            <p>{userInfo.rolename}</p>
                        </div>
                    </div>
                    <div className="sf_core_right_menu_header_logout" onClick={onLogout}>
                        <GlobalIcon name={"icon-logout"}/>
                        <span className="sf_core_right_menu_header_logout_span">{t("logout")}</span>
                    </div>
                </div>
                <div className="sf_core_right_menu_content">
                    <div className="sf_core_right_menu_content_work">
                        <Card title={t("workSet")}>
                            {/*<div className={"sf_core_right_menu_content_work_item"}>*/}
                            {/*    <div className={"sf_core_right_menu_content_work_item_title"}*/}
                            {/*         onClick={handleUserManage}>*/}
                            {/*        <GlobalIcon name={"icon-account-manage"}/>*/}
                            {/*        <span>{t("accountManage")}</span>*/}
                            {/*    </div>*/}
                            {/*</div>*/}
                            <div className={"sf_core_right_menu_content_work_item"}>
                                <div className={"sf_core_right_menu_content_work_item_title"}
                                     onClick={handleChangePassword}>
                                    <GlobalIcon name={"icon-edit"}/>
                                    <span>{t("changePassword")}</span>
                                </div>
                            </div>
                            <div className={"sf_core_right_menu_content_work_item"}>
                                <div className={"sf_core_right_menu_content_work_item_title"}>
                                    <GlobalIcon name={"icon-multilingual"}/>
                                    <span>{t("languageSet")}</span>
                                </div>
                                <div className={"sf_core_right_menu_content_work_item_content"}>
                                    <Select
                                        value={defaultLanguage}
                                        onChange={handleChangeLanguage}
                                        size="small"
                                        options={[{
                                            value: "zh",
                                            label: t("zh")
                                        }, {
                                            value: "en",
                                            label: t("en")
                                        }]}
                                    />
                                </div>
                            </div>
                            <div className={"sf_core_right_menu_content_work_item"}>
                                <div className={"sf_core_right_menu_content_work_item_title"}>
                                    <GlobalIcon name={"icon-help"}/>
                                    <span>{t("helpCenter")}</span>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        )
    }, [userInfo, defaultLanguage]);

    return (renderRightMenu);
};

export default React.memo(RightMenu);